<template>
  <a-modal
    v-model="dialogVisible"
    title="查看报警详情"
    :footer="null"
    width="900px"
    @cancel="handleClose"
    centered
  >
    <div style="position:relative;">
      <baidu-map
        v-if="dialogVisible"
        class="bm-view"
        ak="ksl1LjnkCZntQw4fnkCzIG9ok6DVzAeL"
        :zoom="13"
        :center="positionMap.center"
        scroll-wheel-zoom
        @ready="positionMapHandle"
      >
        <baidu-overlay pane="labelPane" :class="{sample: true,active}" @draw="draw">
          <div class="title_icon">
            <!-- <a-icon type="info-circle" style="color:#FA4623;font-size: 16px;margin-right:8px;" /> -->
            <img :src="danger" style="width: 20px;height: 20px;margin-right:8px;display: inline-block"/>
            <span >{{params.alarmStatusStr}}</span>
          </div>
          <div class="title_icon_content">
            <div>
              <div class="tit_head">车牌号：</div>
              <div class="tit_content">{{this.params.licensePlate||"-"}}</div>
            </div>
            <div>
              <div class="tit_head">报警定位：</div>
              <div class="tit_content">{{this.params.address}}</div>
            </div>
          </div>
        </baidu-overlay>
        <baidu-marker :position="positionMap.lastMarker"></baidu-marker>
      </baidu-map>
      <div class="positions">
        <div>
          <div class="positions_top">{{params.alarmDate}}</div>
          <div class="positions_bottom">报警时间</div>
        </div>
        <!-- <div>
          <div class="positions_top">1小时30分钟12秒</div>
          <div class="positions_bottom">报警持续时间</div>
        </div>-->
        <div>
          <div class="positions_top">中控设备</div>
          <div class="positions_bottom">报警来源</div>
        </div>
        <div>
          <div class="positions_top">{{params.name||"-"}}</div>
          <div class="positions_bottom">车辆绑定骑手</div>
        </div>
        <div>
          <div class="positions_top">{{params.storeName||"-"}}</div>
          <div class="positions_bottom">车辆所属门店</div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BaiduMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import BaiduOverlay from 'vue-baidu-map/components/overlays/Overlay.vue'
const danger = require('../../../assets/img/gantan.png')
export default {
  components: {
    BaiduMap,
    BaiduMarker,
    BaiduOverlay
  },
  data () {
    return {
      dialogVisible: false,
      params: {},
      userRules: {},
      optionsStatus: [],
      positionMap: {
        map: null,
        BMap: null,
        center: '',
        lastMarker: null,
        paths: []
      },
      active: false,
      danger
    }
  },
  methods: {
    test () {},
    draw ({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(this.params.longitude, this.params.latitude)
      )
      el.style.left = pixel.x - 160 + 'px'
      el.style.top = pixel.y - 150 + 'px'
    },
    onInitial (data) {
      this.params = data
      this.dialogVisible = true
      console.log(this.params.longitude, this.params.latitude)
      this.positionMap.lastMarker = {
        lng: this.params.longitude,
        lat: this.params.latitude
      }
      this.positionMap.center = {
        lng: this.params.longitude,
        lat: this.params.latitude
      }
      if (this.positionMap.map) {
        this.positionMap.map.panTo(
          new this.positionMap.BMap.Point(
            this.params.longitude,
            this.params.latitude
          )
        )
      }
    },
    positionMapHandle ({ BMap, map }) {
      // const mapStyle = { style: 'dark' }
      // map.setMapStyle(mapStyle)
      this.positionMap.map = map
      this.positionMap.BMap = BMap
      this.positionMap.map.panTo('上海')
      this.positionMap.map.panTo(
        new this.positionMap.BMap.Point(
          this.params.longitude,
          this.params.latitude
        )
      )
    },

    // 导入
    onSubmit () {
      this.dialogVisible = false
    },
    // 关闭
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less" >
.positions {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 820px;
  height: 92px;
  opacity: 0.96;
  background: #ffffff;
  left: 20px;
  bottom: 20px;
}
.downBox {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: #606266;
  line-height: 22px;
}
.downBoxCount {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #606266;
  line-height: 20px;
  margin-top: 12px;
}
.xu_border {
  width: 360px;
  text-align: center;
  height: 150px;
  background: #ffffff;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  img {
    width: 38px;
    height: 40px;
    margin-top: 20px;
  }
  .name {
    height: 17px;
    font-size: 12px;
    font-weight: 400;
    color: #606266;
    line-height: 17px;
    margin: 8px 0 12px;
  }
}
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 360px;
  height: 150px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.bm-view {
  width: 860px;
  height: 483px;
}
.positions_top {
  height: 24px;
  margin-top: 22px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #333333;
  line-height: 25px;
}
.positions_bottom {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #606266;
  line-height: 20px;
  margin-top: 8px;
}
.sample {
  width: 320px;
  height: 110px;
  background: white;
  overflow: hidden;
  border-radius: 4px 4px 4px 0px 0px 0px 4px;
  box-shadow: 0px 2px 6px 0px #ccc;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
.sample.active {
  background: rgba(0, 0, 0);
  color: #fff;
}
.title_icon {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: #fa4623;
  line-height: 22px;
}
.title_icon_content {
  display: flex;
  justify-content: space-around;
}
.tit_head {
  height: 20px;
  font-size: 14px;
  min-width: 60px;
  font-weight: 400;
  text-align: left;
  color: #606266;
  line-height: 20px;
  margin-bottom: 4px;
  margin-top: 12px;
}
.tit_content {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 20px;
}
</style>
